<template>
  <view class="p-4">
    <!-- 标题 -->
    <view class="mb-4 text-xl font-bold">
      {{ $t('feedback') }}
    </view>

    <!-- 反馈内容 -->
    <view class="mb-4">
      <view class="mb-2 text-base">
        反馈内容
      </view>
      <uv-textarea
        v-model="content"
        placeholder="请描述你遇到的问题或建议…"
        class="rounded-xl bg-white p-3 shadow-sm"
        maxlength="500"
        count
      />
    </view>

    <!-- 联系方式 -->
    <view class="mb-4">
      <view class="mb-2 text-base">
        联系方式（可选）
      </view>
      <uv-input
        v-model="contact"
        placeholder="手机号 / 邮箱 / 微信"
        class="rounded-xl bg-white p-3 shadow-sm"
      />
    </view>

    <!-- 图片上传 -->
    <view class="mb-6">
      <view class="mb-2 text-base">
        上传截图（可选）
      </view>
      <uv-upload
        :file-list="images"
        max-count="3"
        :use-before-read="true"
        :preview-full-image="true"
        class="rounded-xl bg-white p-3 shadow-sm"
        @before-read="beforeRead"
        @after-read="afterRead"
        @delete="onDelete"
      />
    </view>

    <!-- 提交按钮 -->
    <uv-button
      type="primary"
      text="提交反馈"
      class="w-full rounded-xl text-white"
      @click="submit"
    />
  </view>
</template>

<script lang="ts" setup>
import { toast } from '@climblee/uv-ui/libs/function/index.js'
import { ref } from 'vue'

definePage({
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationBarBackgroundColor: '#FFF',
    navigationBarTitleText: '%feedback%',
  },
})

interface FileItem {
  url: string
  status?: 'uploading' | 'success' | 'failed'
  message?: string
  // 可以包含你想扩展的字段，例如后端返回的 key、fileId 等
}

const images = ref<FileItem[]>([])

// 在读取之前处理（例如过滤超大文件）
function beforeRead(file: any, fileList: any, name: string) {
  // file 可能是单个 object 或数组，视平台而定
  // 你可以返回 false 来阻止某些文件被加入
  const maxSize = 5 * 1024 * 1024 // 限制 5MB
  if (file.size && file.size > maxSize) {
    toast('单张图片不能超过 5MB')
    return false
  }
  return true
}

async function afterRead(event: any) {
  // event.file 是选择的文件，可以是数组或单个
  const fileList = Array.isArray(event.file) ? event.file : [event.file]
  for (const file of fileList) {
    // 把它加到本地 fileList，并标记为 uploading
    const item: FileItem = {
      url: file.url,
      status: 'uploading',
      message: '上传中',
    }
    images.value.push(item)
    const index = images.value.length - 1

    try {
      const res = uni.uploadFile({
        url: 'https://你的后端/upload', // 替换成你的 upload 接口
        filePath: file.url,
        name: 'file', // 后端接文件字段名
        formData: {
          // 其他自定义参数
          userId: '123',
        },
        success: (uploadRes) => {
          // 假设后端返回 JSON 字符串
          const data = JSON.parse(uploadRes.data)
          // 更新状态
          images.value.splice(index, 1, {
            url: file.url,
            status: 'success',
            message: '',
            // 如果后端返回了文件地址或 key
            // 比如 data.url
          })
        },
        fail: () => {
          images.value.splice(index, 1, {
            url: file.url,
            status: 'failed',
            message: '上传失败',
          })
        },
      })
    }
    catch (err) {
      images.value.splice(index, 1, {
        url: file.url,
        status: 'failed',
        message: '上传异常',
      })
    }
  }
}

function onDelete(file: File, fileList: File[]): File[] {
  return fileList.filter(f => f !== file)
}
const content = ref('')
const contact = ref('')

function submit() {
  if (!content.value.trim()) {
    toast('请填写反馈内容')
    return
  }

  toast('提交成功')
}
</script>

<style lang="scss" scoped></style>
